/**
 * @description tooltip 事件
 */
import E from 'wangeditor'
const { $, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E
import {Message,MessageBox} from 'element-ui'
/**
 * 生成 Tooltip 的显示隐藏函数
 */
export function createShowHideFn(editor) {
  let tooltip= Tooltip | null

function selfWidthAndHeight($node){
    alert($node);
}
  /**
   * 显示 tooltip
   * @param $node 链接元素
   */
  function showImgTooltip($node) {
    const conf = [
      {
        $elem: $("<span class='w-e-icon-trash-o'></span>"),
        onClick: (editor, $node) => {
          // 选中img元素
          editor.selection.createRangeByElem($node)
          editor.selection.restoreSelection()
          editor.cmd.do('delete')
          // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
          return true
        },
      },
      {
        $elem: $('<span>30%</span>'),
        onClick: (editor, $node) => {
         $node.attr('width', '30%')
          // $node.css('width', '30%')
          // $node.css('height', '30%')
          $node.removeAttr('height')

          // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
          return true
        },
      },
      {
        $elem: $('<span>50%</span>'),
        onClick: (editor, $node) => {
         $node.attr('width', '50%')
        //   $node.css('width', '50%')
        //   $node.css('height', '50%')
         $node.removeAttr('height')

          // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
          return true
        },
      },
      {
        $elem: $('<span>100%</span>'),
        onClick: (editor, $node) => {
          $node.attr('width', '100%')
          // $node.css('width', '100%')
          // $node.css('height', '100%')
          $node.removeAttr('height')

          // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
          return true
        },
      },
    ]

    conf.push({
      $elem: $(`<span>重置</span>`),
      onClick: (editor, $node) => {
        $node.removeAttr('width')
        $node.removeAttr('height')
        // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
        return true
      },
    })
    conf.push({
      $elem: $(`<span >自定义宽</span>`),
      onClick: (editor, $node) => {
        //$node.removeAttr('width')
        //$node.removeAttr('height')
        MessageBox.prompt('请输入宽', '提示', {
          confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /[^0-9]?/,
            inputErrorMessage: '内容格式不正确'
        }).then(({ value }) => {
          $node.attr('width', value+"px")
          Message.success({
            type: 'success',
            message: '指定的宽度是: ' + value+"px"
          });
        }).catch(() => {
          Message.success({
            type: 'info',
            message: '取消输入'
          });
        });


        // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
        return false
      },
    })
    conf.push({
      $elem: $(`<span >自定义高</span>`),
      onClick: (editor, $node) => {
        //$node.removeAttr('width')
        //$node.removeAttr('height')
        MessageBox.prompt('请输入高', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[^0-9]?/,
          inputErrorMessage: '内容格式不正确'
        }).then(({ value }) => {
          $node.attr('height', value+"px")
          Message.success({
            type: 'success',
            message: '指定的高度是: ' + value+"px"
          });
        }).catch(() => {
          Message.success({
            type: 'info',
            message: '取消输入'
          });
        });
        // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
        return false
      },
    })

    if ($node.attr('data-href')) {
      conf.push({
        $elem: $(`<span>'查看链接'</span>`),
        onClick: (editor, $node) => {
          let link = $node.attr('data-href')
          if (link) {
            link = decodeURIComponent(link)
            window.open(link, '_target')
          }
          // 返回 true，表示执行完之后，隐藏 tooltip。否则不隐藏。
          return true
        },
      })
    }

    tooltip = new Tooltip(editor, $node, conf)
    tooltip.create()
  }

  /**
   * 隐藏 tooltip
   */
  function hideImgTooltip() {
    // 移除 tooltip
    if (tooltip) {
      tooltip.remove()
      tooltip = null
    }
  }

  return {
    showImgTooltip,
    hideImgTooltip,
  }
}

/**
 * 绑定 tooltip 事件
 * @param editor 编辑器实例
 */
export default function bindTooltipEvent(editor) {
  const { showImgTooltip, hideImgTooltip } = createShowHideFn(editor)

  // 点击图片元素是，显示 tooltip
  editor.txt.eventHooks.imgClickEvents.push(showImgTooltip)

  // 点击其他地方，或者滚动时，隐藏 tooltip
  editor.txt.eventHooks.clickEvents.push(hideImgTooltip)
  editor.txt.eventHooks.keyupEvents.push(hideImgTooltip)
  editor.txt.eventHooks.toolbarClickEvents.push(hideImgTooltip)
  editor.txt.eventHooks.menuClickEvents.push(hideImgTooltip)
  editor.txt.eventHooks.textScrollEvents.push(hideImgTooltip)
  editor.txt.eventHooks.imgDragBarMouseDownEvents.push(hideImgTooltip)

  // change 时隐藏
  editor.txt.eventHooks.changeEvents.push(hideImgTooltip)
}
